<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ margin:0; padding:0; font-size:14px}
            #box{ width:500px; margin:100px auto}
            table,th,td{ border:1px solid #000; border-collapse:collapse}
            td,th{ width:100px; height:30px; padding:10px}
            input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
            tbody tr td:first-child{text-align: center;}
            tfoot td{text-align: right;}
            .editBtn{ color:#666}
            .delBtn{ color:red}
            .okBtn,.cancelBtn{ display:none}
            
            .edit span{ display:none}
            .edit input[type="text"]{ display:inline-block}
            .edit .editBtn,.edit .delBtn,.edit .clearBtn{ display:none}
            .edit .okBtn,.edit .cancelBtn{ display:inline}
            </style>
</head>

<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck" /></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">清空</a>
                        <a href="javascript:;" class="clearBtn">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">清空</a>
                        <a href="javascript:;" class="clearBtn">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">清空</a>
                        <a href="javascript:;" class="clearBtn">删除</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="check" /></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">清空</a>
                        <a href="javascript:;" class="clearBtn">删除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script>
        var editBtn = document.querySelectorAll('.editBtn')
        var okBtn = document.querySelectorAll('.okBtn')
        var cancelBtn = document.querySelectorAll('.cancelBtn')
        var delBtn = document.querySelectorAll('.delBtn')
        var allCheck = document.querySelector('#allCheck')
        var checks = document.querySelectorAll('.check')
        var clearBtn = document.querySelectorAll('.clearBtn')
        var money = document.querySelectorAll('#money')
        //全选功能实现
        allCheck.onchange = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = this.checked
            }
            num = this.checked ? checks.length : 0
            for (var i = 0; i < checks.length; i++) {
                checks[i].onchange = function () {
                    this.checked ? num++ : num--
                    allCheck.checked = num === checks.length
                }
            }
        }
        //编辑内容功能
        Array.from(editBtn).forEach(function (btn) {
            btn.onclick = function () {
                var tr = btn.parentNode.parentNode
                tr.className = 'edit'
                var spans = tr.querySelectorAll('span')
                Array.from(spans).forEach(function (span) {
                    span.nextElementSibling.value = span.innerHTML
                })
            }
        })
        //编辑内容完成
        Array.from(okBtn).forEach(function (btn) {
            btn.onclick = function () {
                var tr = btn.parentNode.parentNode
                tr.className = ''
                var spans = tr.querySelectorAll('span')
                Array.from(spans).forEach(function (span) {
                    span.innerHTML = span.nextElementSibling.value
                })
            }
        })
        //取消编辑
        Array.from(cancelBtn).forEach(function (btn) {
            btn.onclick = function () {
                var tr = btn.parentNode.parentNode
                tr.className = ''
            }
        })
        //清空内容
        Array.from(delBtn).forEach(function (btn) {
            btn.onclick = function () {
                var tr = btn.parentNode.parentNode
                var spans = tr.querySelectorAll('span')
                Array.from(spans).forEach(function (span) {
                    span.innerHTML = ''
                })
            }
        })
        //删除该行
        Array.from(clearBtn).forEach(function (btn) {
            btn.onclick = function () {
                var tr = btn.parentNode.parentNode
                if (confirm('你确定要删除吗？')) {
                    tr.parentNode.removeChild(tr)
                }
            }
        })

        //整不来了
        //计算总价
        //check改变触发事件，获取该行tr中的td内容
        //根据总价公式计算




    </script>
</body>

</html>